import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
import React, { memo, useState, useRef } from "react";
import classes from "./index.module.less";
import { requestSubmitGuide } from "../../../api/wallet";
import useServices from "../../../hooks/useRequest";
import iconTicket from "../images/icon-ticket.svg";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var Component = function(props, ref) {
    var _props_type = props.type, type = _props_type === void 0 ? "qrcode" : _props_type, wrapRef = props.wrapRef, visible = props.visible, closeGuide = props.closeGuide, scrollDistance = props.scrollDistance;
    var _useState = _sliced_to_array(useState(0), 2), stepIndex = _useState[0], setStepIndex = _useState[1];
    var startClientY = useRef(0);
    var endClientY = useRef(0);
    var services = useServices({
        requestSubmitGuide: requestSubmitGuide
    });
    var scrollToDistance = function(targetDistance) {
        var scrollContainer = wrapRef;
        var startTime = performance.now();
        var startScrollTop = scrollContainer.scrollTop;
        function scrollAnimation(currentTime) {
            var elapsedTime = currentTime - startTime;
            // 根据缓冲函数计算滚动距离
            var easeInOutCubic = function(t) {
                return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
            };
            var progress = Math.min(elapsedTime / 1000, 1);
            var easedProgress = easeInOutCubic(progress);
            var newScrollTop = startScrollTop + (targetDistance - startScrollTop) * easedProgress;
            scrollContainer.scrollTop = newScrollTop;
            if (progress < 1) {
                window.requestAnimationFrame(scrollAnimation);
            }
        }
        window.requestAnimationFrame(scrollAnimation);
    };
    var postGuideHistory = function() {
        var _ref = _async_to_generator(function(paramCode) {
            var e;
            return _ts_generator(this, function(_state) {
                switch(_state.label){
                    case 0:
                        _state.trys.push([
                            0,
                            2,
                            ,
                            3
                        ]);
                        return [
                            4,
                            services.requestSubmitGuide(paramCode)
                        ];
                    case 1:
                        _state.sent();
                        return [
                            3,
                            3
                        ];
                    case 2:
                        e = _state.sent();
                        return [
                            3,
                            3
                        ];
                    case 3:
                        return [
                            2
                        ];
                }
            });
        });
        return function postGuideHistory(paramCode) {
            return _ref.apply(this, arguments);
        };
    }();
    var goToRewards = function() {
        // const _descScrollTop = descRef.offsetTop
        scrollToDistance(scrollDistance);
        setStepIndex(1);
    };
    var goToRewardsAndCloseMask = function() {
        scrollToDistance(scrollDistance);
        setStepIndex(2);
        handleCloseGuide();
    };
    var handleCloseGuide = function() {
        closeGuide();
        postGuideHistory("ona_nft_detail_guide");
    };
    var scrollToSubEvent = function(e) {
        endClientY.current = e.touches[0].clientY;
        if (startClientY.current > endClientY.current) {
            if (type === "barcode" && stepIndex === 0) {
                goToRewards();
            }
            if (type === "qrcode" && stepIndex === 1) {
                goToRewardsAndCloseMask();
            }
        }
    };
    var scrollStartSubEvent = function(e) {
        startClientY.current = e.touches[0].clientY;
    };
    return /*#__PURE__*/ _jsx(_Fragment, {
        children: visible && /*#__PURE__*/ _jsxs("div", {
            className: "".concat(classes.guide),
            onTouchStart: function(e) {
                scrollStartSubEvent(e);
            },
            onTouchMove: function(e) {
                scrollToSubEvent(e);
            },
            children: [
                type === "barcode" && /*#__PURE__*/ _jsxs(_Fragment, {
                    children: [
                        stepIndex === 0 && /*#__PURE__*/ _jsxs("div", {
                            className: classes.down,
                            children: [
                                /*#__PURE__*/ _jsx("div", {
                                    className: classes.downText,
                                    children: "Scroll down to see your Rewards!"
                                }),
                                /*#__PURE__*/ _jsx("div", {
                                    className: classes.downBtn,
                                    onClick: function() {
                                        goToRewards();
                                    }
                                })
                            ]
                        }),
                        stepIndex === 1 && /*#__PURE__*/ _jsxs("div", {
                            className: "".concat(classes.ok, " ").concat(classes.barCode),
                            onClick: function() {
                                handleCloseGuide();
                            },
                            children: [
                                /*#__PURE__*/ _jsx("div", {
                                    className: classes.okText,
                                    children: "Click To Use"
                                }),
                                /*#__PURE__*/ _jsx("div", {
                                    className: classes.okBtn,
                                    children: "OK"
                                }),
                                /*#__PURE__*/ _jsxs("div", {
                                    className: classes.okBox,
                                    children: [
                                        /*#__PURE__*/ _jsx("div", {
                                            className: classes.okCircle,
                                            children: /*#__PURE__*/ _jsx("div", {
                                                className: classes.circle
                                            })
                                        }),
                                        /*#__PURE__*/ _jsx("div", {
                                            className: classes.ticket,
                                            children: /*#__PURE__*/ _jsx("img", {
                                                src: iconTicket,
                                                alt: ""
                                            })
                                        })
                                    ]
                                })
                            ]
                        })
                    ]
                }),
                type === "qrcode" && /*#__PURE__*/ _jsxs(_Fragment, {
                    children: [
                        stepIndex === 0 && /*#__PURE__*/ _jsxs("div", {
                            className: "".concat(classes.ok, " ").concat(classes.qrCode),
                            onClick: function() {
                                setStepIndex(1);
                            },
                            children: [
                                /*#__PURE__*/ _jsx("div", {
                                    className: classes.okText,
                                    children: "Click To Use"
                                }),
                                /*#__PURE__*/ _jsx("div", {
                                    className: classes.okBtn,
                                    children: "OK"
                                }),
                                /*#__PURE__*/ _jsx("div", {
                                    className: classes.okBox,
                                    children: /*#__PURE__*/ _jsx("div", {
                                        className: classes.okCircle,
                                        children: /*#__PURE__*/ _jsx("div", {
                                            className: classes.circle
                                        })
                                    })
                                }),
                                /*#__PURE__*/ _jsx("img", {
                                    className: classes.qrcodeAngle,
                                    src: require("../../../assets/icons/qrTip.svg")
                                })
                            ]
                        }),
                        stepIndex === 1 && /*#__PURE__*/ _jsxs("div", {
                            className: classes.down,
                            children: [
                                /*#__PURE__*/ _jsx("div", {
                                    className: classes.downText,
                                    children: "Scroll down to see your Rewards!"
                                }),
                                /*#__PURE__*/ _jsx("div", {
                                    className: classes.downBtn,
                                    onClick: function() {
                                        goToRewardsAndCloseMask();
                                    }
                                })
                            ]
                        })
                    ]
                })
            ]
        })
    });
};
var Guide = /*#__PURE__*/ memo(Component);
export default Guide;

 //# sourceMappingURL=index.js.map